<template>
  <div class="app-container" v-appBox>
    <div v-searchBox class="warp-card-search" :style="{height:search ? 'auto':0}">
      <el-card ref="search">
        <slot name="search"></slot>
      </el-card>
    </div>
    <el-card class="warp-card-table" ref="table">
      <div slot="header" class="clearfix">
        <slot name="header"></slot>
        <el-button icon="el-icon-search" type="primary" style="float: right;" circle @click="search = !search"></el-button>
      </div>
      <el-table ref="multipleTable" :data="tableData" :height="tebleHeight" tooltip-effect="dark" style="width: 100%">
        <slot name="table"></slot>
      </el-table>
      <div class="mt20">
        <span class="demonstration">显示总数</span>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="tableData.length / 10" layout="total, prev, pager, next" :total="tableData.length">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";

@Component({
  name: "User",
  directives: {
    searchBox: {
      update: function(el: any, binding: any, vnode: any) {
        const height: number = vnode.elm.clientHeight;
        const _this = vnode.context;
        if (height === 0) {
          _this.tebleHeight = _this.boxHeight;
        } else {
          _this.tebleHeight = _this.boxHeight - height;
        }
      }
    },
    appBox: {
      inserted: function(el: any, binding: any, vnode: any) {
        const height: number = vnode.elm.clientHeight;
        const _this = vnode.context;
        _this.boxHeight = height - 230;
        _this.$nextTick(() => (_this.tebleHeight = height));
      }
    }
  }
})
export default class extends Vue {
  private search: boolean = false;
  private boxHeight: number = 0;
  private searchHeight: number = 0;
  private tebleHeight: number = 0;
  private tableData: any = (function() {
    var arr = [];
    for (let index = 0; index < 50; index++) {
      arr.push({
        date: "2016-05-03",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄"
      });
    }
    return arr;
  })();

  private currentPage: Number = 1;
  handleSizeChange(val: any): void {
    console.log(`每页 ${val} 条`);
  }
  handleCurrentChange(val: any): void {
    console.log(`当前页: ${val}`);
  }
  mounted() {}
}
</script>

<style lang="scss" scoped>
.mt20 {
  margin-top: 20px;
}
.app-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .warp-card-search {
    height: auto;
    transition: all 1s;
    -moz-transition: all 1s; /* Firefox 4 */
    -webkit-transition: all 1s; /* Safari 和 Chrome */
    -o-transition: all 1s; /* Opera */
    & > div {
      height: calc(100% - 10px);
    }
    // margin-bottom: 20px;
  }
  .warp-card-table {
    flex: 1;
  }
}
</style>
